<template>
  <div class="app-container">
    <el-dialog :title="'寄售数量列表' + dataForm.num + '个'" :close-on-click-modal="false" :visible.sync="visible" class="consignProd-add-upd" width="40%" @close="closeDialog">

      <!-- 搜索相关区域 -->
      <div style="text-align: end">
<!--        <el-form :inline="true" :model="searchParam" class="demo-form-inline">-->
<!--          <el-form-item label="商品名称">-->
<!--            <el-input-->
<!--              v-model="searchParam.prodName"-->
<!--              size="mini"-->
<!--              placeholder="商品名称模糊查询"-->
<!--            />-->
<!--          </el-form-item>-->
<!--          <el-form-item label="寄售状态">-->
<!--            <el-select v-model="searchParam.status"  size="mini" placeholder="请选择" clearable>-->
<!--              <el-option label="开启" value="2" />-->
<!--              <el-option label="关闭" value="1" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <el-button-->
<!--              type="primary"-->
<!--              size="mini"-->
<!--              icon="el-icon-search"-->
<!--              @click="getPage()"-->
<!--            >查询</el-button>-->
<!--            <el-button-->
<!--              size="mini"-->
<!--              icon="el-icon-refresh"-->
<!--              @click="() => {this.searchParam = {}, this.getPage()}"-->
<!--            >重置</el-button>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
        <div>
          可委托售卖最低价（元）：<span style="color: #0063cc">{{ (prodConfig.lowPrice / 100).toFixed(2) }}</span>
        </div>
        <div>
          可委托售卖最高价（元）：<span style="color: #cc0000">{{ (prodConfig.highPrice / 100).toFixed(2) }}</span>
        </div>
      </div>
      <!-- 列表相关区域 -->
      <el-table
        v-loading="pageLoading"
        :data="dataVO"
        max-height="500"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="商品名称" prop="prodName" align="center">
          <template slot-scope="{row}">
            <span>{{ row.prodName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="编码" prop="code" align="center">
          <template slot-scope="{row}">
            <span>{{ row.code }}</span>
          </template>
        </el-table-column>
        <el-table-column label="寄售价格（元）" prop="price" align="center">
          <template slot-scope="{row}">
            <span>{{(row.price / 100).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" align="center">
          <template slot-scope="{row}">
            <el-tag v-if="row.status === 0" size="small" type="warning">审核中</el-tag>
            <el-tag v-if="row.status === 1" size="small">寄售中</el-tag>
            <el-tag v-if="row.status === 2" size="small" type="danger">已驳回</el-tag>
            <el-tag v-if="row.status === 3" size="small" type="success">已出售</el-tag>
            <el-tag v-if="row.status === 4" size="small" type="info">已取消</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页条 -->
<!--      <pagination v-show="pageVO.total>0" :total="pageVO.total" :page.sync="pageQuery.pageNum" :limit.sync="pageQuery.pageSize" @pagination="getPage()" />-->
    </el-dialog>
  </div>
</template>

<script>
  // import Pagination from '@/components/Pagination'
  // import * as api from '@/api/consign'

  export default {
    name: '',
    // components: { Pagination },
    data() {
      return {
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        // 查询的参数
        pageQuery: {
          pageSize: 10,
          pageNum: 1
        },
        param: {
          userId: null,
          prodId: null
        },
        visible: false,
        // 返回参数
        dataVO: [],
        pageVO: {
          list: [], // 返回的列表
          total: 0, // 一共多少条数据
          pages: 0 // 一共多少页
        },
        dataForm: {
          num: 0
        },
        prodConfig: {},
        // loading
        pageLoading: true,
        // 查询参数
        searchParam: {},
        autoAuditSwitch: false,
        ids: [],
        addOrUpdateVisible: false
      }
    },
    mounted() {
    },
    methods: {
      init(row) {
        this.dataForm = row
        this.visible = true
        this.pageLoading = true
        this.$nextTick(() => {
          // this.$refs['dataForm'].resetFields()
          if (!this.dataForm) {
            return
          }
          this.param.userId = this.dataForm.userId
          this.param.prodId = this.dataForm.prodId
          this.getProdConfig()
          this.getPage()
        })
      },
      getPage() {
        api.getConsignByUserProd({ ...this.param }).then(data => {
          this.dataVO = data
          this.pageLoading = false
        })
        // this.pageLoading = true
        // api.prodPage({ ...this.pageQuery, ...this.searchParam }).then(pageVO => {
        //   this.pageVO = pageVO
        //   this.pageLoading = false
        // })
      },
      getProdConfig() {
        api.getProdConfigByProdId(this.dataForm.prodId).then(res => {
          this.prodConfig = res
        })
      },
      closeDialog() {
        this.visible = false
        this.dataForm = {
          num: 0
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    .brand-logo-img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 200px;
    }
  }
</style>
